//引入ui组件
import CountUI from '../../components/Count';
//引入redux的核心 store，因为有了它，就可以进行更改数据和获取数据
// import store from '../../redux/store';
//引入react-redux提供的connect，用于连接ui组件和redux
import {connect} from 'react-redux';
import {incrementAction,decrementAction,incrementActionAsync} from '../../redux/count_action';
//创建容器组件  ui组件是容器组件的子组件，如果想要让ui组件渲染出来，就需要渲染容器组件
//容器组件会往ui组件中传递 1.redux中所保存的状态 2.用于操作状态的方法，均通过props的方式进行传递
//connnect在第一次调用的时候，要传入两个参数，这两个参数必须是函数

//react-redux 
//1.负责将ui组件封装到容器组件中，让ui组件称为容器组件的子组件
//2.从组件壳中获取redux中的核心组件store
//3.负责调用函数a ，函数b，函数a用来传递从store中获取的状态，函数b用来传递操作方法

/////////////////////////////////#方式1
//函数a 将key-value作为props传递给UI组件
// function mapStateToProps(state){//react-redux，已经默认把store中的状态state传给给该方法
//    return {count:state}
//    //return 1 当返回不是普通对象时，前台报index.js:1 mapStateToProps() in Connect(Count) must return a plain object. Instead received 1.
// }




//函数b 将操作状态的方法以props的方式传递给UI组件
// function mapDispatchToProps(dispatch){//react-redux，已经默认把store中的dispatch方法传给该方法

//     //return 1  当返回的不是function的时候，前台会报index.js:1 mapDispatchToProps() in Connect(Count) must return a plain object. Instead received 1.
//     //所以react-redux已经把此方法定义为 mapDispatchToProps()了
//     // return {'increment':(number)=>{
//     //     console.log('操作',number);
//     //     //通知redux执行加法
//     //     dispatch(incrementAction(number))
       
//     // }}
//     return {
//         increment:number=> dispatch(incrementAction(number)),
//         decrement:number=> dispatch(decrementAction(number)),
//         incrementAsync:(number,time)=>dispatch(incrementActionAsync(number,time))
//     }
// }

////////////////////////#方式2
const mapStateToProps=state=>({count:state})//以上方式可以优化为
const mapDispatchToProps=dispatch=>(    //键-方法名 value--function或者action对象
    {
        increment:number=> dispatch(incrementAction(number)),
        decrement:number=> dispatch(decrementAction(number)),
        incrementAsync:(number,time)=>dispatch(incrementActionAsync(number,time))
    }
)

/////////////////////////////调用方式1，或者方式2传递参数
// const CountContainer =connect(mapStateToProps,mapDispatchToProps)(CountUI)

 ////////////////////////  #参数直接写进去
// const CountContainer =connect(
//     state=>({count:state}),
//     dispatch=>(
//         {
//             increment:number=>dispatch(incrementAction(number)),
//             decrement:number=>dispatch(decrementAction(number)),
//             incrementAsync:(number,time)=>dispatch(incrementActionAsync(number,time))
//         }
//     ))(CountUI)

//////////////// react-redux 只要connect中的两个参数能返回对象，就会自动将对象自动分发到reducers中
// const CountContainer =connect(
//     state=>({count:state}),

//         {
//             increment:number=>(incrementAction(number)),
//             decrement:number=>(decrementAction(number)),
//             incrementAsync:(number,time)=>(incrementActionAsync(number,time))
//         }
//     )(CountUI)
///////////////// 参数 和方法参数一样，可以将参数都省略
    const CountContainer =connect( //react-redux 会自动将对象进行转发到redux的reducers组件中
        state=>({count:state}),//用来获取store中的状态，并设置key value键值对
    
            {
                increment:incrementAction,
                decrement:decrementAction,
                incrementAsync:incrementActionAsync
            }  //定义操作方法，每个操作方法作为key，action对象作为value，并自动传到reducer中
        )(CountUI)



export default CountContainer
